Programação Web

Aula 19 - Criando elementos

Helder Jefferson Ferreira da Luz

helder.luz@ifpr.edu.br

Objetivos

• Navegar pela árvore do DOM usando propriedades de parentesco e irmandade
• Diferenciar a navegação por nós (nodes) e por elementos (elements)
• Criar novos elementos HTML dinamicamente com JavaScript
• Adicionar e remover elementos da página

Navegando entre os nós

Navegando entre os elementos

Navegando entre nós e elementos

Elemento é basicamente uma tag HTML, como <div>, <article>, <title>.

Nó engloba também outros elementos do documento HTML, como textos e comentários.

Navegação por elementos é mais fácil e previsível.

Adicionar elementos HTML

Para a criação de elementos HTML pode-se modificar ou concatenar a propriedade innerHTML do elemento, ou utilizar o método createElement() para criar a estrutura HTML e o método appendChild() para colocado no documento HTML.

Exemplo

element.innerHTML += "<tr><td>Nome</td><td>Idade</td></tr>";

Adicionar elementos HTML

Exemplo usando createElement e appendChild

const linha = document.createElement("tr");
const nome = document.createElement("td");
const idade = document.createElement("td");
nome.textContent = "Nome";
idade.textContent = "Idade";
linha.appendChild(nome);
linha.appendChild(idade);
document.querySelector("tbody").appendChild(linha);

innerHTML vs createElement

Adicionando Elementos (Métodos Modernos)

appendChild é o método clássico, mas existem alternativas mais flexíveis:

• elemento.append(...elementos)

  • Adiciona um ou mais nós (ou texto) ao final do elemento.

• elemento.prepend(...elementos)

  • Adiciona um ou mais nós (ou texto) no início do elemento.

Adicionando Elementos (Métodos Modernos)

Exemplo

const container = document.querySelector('#container');
const p1 = document.createElement('p');
p1.textContent = 'Primeiro parágrafo';

// Adiciona múltiplos nós e texto de uma vez
container.append(p1, 'Texto solto', document.createElement('hr'));

Removendo Elementos

Para remover um elemento, o método moderno é o mais simples:

• elemento.remove()
  • Remove o elemento diretamente do DOM.

Exemplo

const itemParaRemover = document.querySelector('#item-obsoleto');
if (itemParaRemover) {
  itemParaRemover.remove();
}

O método antigo, pai.removeChild(filho), também existe, mas remove() é mais direto.

Resumo: Métodos Recomendados

Otimizando Adições com DocumentFragment

Adicionar muitos elementos ao DOM um por um pode ser lento, pois cada append() força o navegador a "redesenhar" a página.

Para otimizar, usamos um DocumentFragment: um "mini-DOM" em memória.

1. Crie um DocumentFragment.
2. Adicione todos os seus novos elementos a ele.
3. Adicione o fragmento ao DOM de uma só vez.

Isso resulta em apenas um redesenho, melhorando muito a performance.

Otimizando Adições com DocumentFragment

Exemplo

const lista = document.querySelector('#minha-lista');

// 1. Crie o fragmento
const fragmento = document.createDocumentFragment(); 

for (let i = 0; i < 10; i++) {
  const item = document.createElement('li');
  item.textContent = `Item número ${i + 1}`;
  fragmento.append(item); // 2. Adicione os itens ao fragmento
}

// 3. Adicione o fragmento ao DOM (apenas 1 vez!)
lista.append(fragmento); 

O Objeto event

Quando um evento ocorre, a função de callback recebe automaticamente um objeto como primeiro argumento. Por convenção, o chamamos de event ou e.

Este objeto contém informações valiosas sobre a interação do usuário.

As propriedades mais importantes são:

• event.target
  • O elemento exato que originou o evento (ex: o botão específico em que se clicou).
• event.currentTarget
  • O elemento no qual o addEventListener foi anexado.

event.target na Prática (Delegação de Eventos)

event.target é essencial para gerenciar eventos em múltiplos elementos filhos, como em uma lista.

Problema: Como saber qual botão "Excluir" foi clicado em uma lista de tarefas?

Solução: Adicione um único addEventListener ao elemento pai (<ul>) e use event.target para identificar o filho que foi clicado.

event.target na Prática (Delegação de Eventos)

<ul id="lista-tarefas">
  <li>Tarefa 1 <button class="btn-excluir">X</button></li>
  <li>Tarefa 2 <button class="btn-excluir">X</button></li>
</ul>

const lista = document.querySelector('#lista-tarefas');

lista.addEventListener('click', function(e) {
  // Verifica se o elemento clicado tem a classe 'btn-excluir'
  if (e.target.classList.contains('btn-excluir')) {
    // Remove o elemento pai do botão (o <li>)
    e.target.parentElement.remove();
  }
});

Dúvidas?

Exercícios

1. Faça uma página com uma área de texto e um botão. Ao clicar no botão, o texto da área deve ser adicionado à página por meio da criação de um elemento HTML. O elemento utilizado fica ao seu critério.
2. Faça uma página com 2 campos para número e um botão. Ao clicar no botão, os número devem ser somados e apresentados em uma nova estrutura na página. A cada clique um novo elemento deve ser adicionado, criando um histórico dos cálculos feitos.
3. Crie um formulário para nome, e-mail, idade e cidade. Ao clicar no botão, as informações devem ser apresentadas em formato cartão na página. Cada cartão deve possuir um botão que permita remove-lo da página.

Exercícios

4. Crie uma aplicação de "Lista de Tarefas". Deve haver um campo de texto e um botão "Adicionar". Ao clicar no botão, um novo item (<li>) deve ser criado e adicionado a uma lista (<ul>). Cada item da lista deve conter:
   • O texto da tarefa.
   • Um botão "Excluir" que remove o item da lista.
   • (Bônus) Um checkbox que, ao ser marcado, aplica uma classe CSS .completed ao item (ex: riscando o texto).

Exercícios

5. Crie uma página com um <table> vazio e um botão "Carregar Dados". Crie um array de objetos em JavaScript (ex: uma lista de usuários com nome e email). Ao clicar no botão, a função deve percorrer o array e gerar as linhas (<tr>) e células (<td>) da tabela. Use um DocumentFragment para montar todas as linhas em memória antes de adicioná-las ao <tbody> de uma só vez.